<template>
  <div class="app-container">
    <el-form
      class="searchform"
      :model="queryParams"
      size="small"
      :inline="true"
    >
      <el-form-item label="项目名称">
        <el-input
          style="width: 200px"
          v-model="queryParams.itemName"
          placeholder="请输入"
          @keyup.enter.native="handleSearch"
        ></el-input>
      </el-form-item>
      <el-form-item label="编号">
        <el-input
          style="width: 200px"
          v-model="queryParams.itemNumber"
          placeholder="请输入"
          @keyup.enter.native="handleSearch"
        ></el-input>
      </el-form-item>
      <el-form-item label="客户名称">
        <OrganizationSelect
          style="width: 300px"
          v-model="queryParams.entrustOrganizationId"
        ></OrganizationSelect>
      </el-form-item>
      <el-form-item label=" " label-width="20px">
        <el-button type="primary" icon="el-icon-search" @click="handleSearch"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table-wrapper">
      <div class="tableoperation">
        <el-button
          type="primary"
          v-hasPermi="['basic:agreementItem:add']"
          icon="el-icon-plus"
          @click="handleAddProject"
          >新增合同项目</el-button
        >
        <el-button
          type="primary"
          v-hasPermi="['basic:agreementItem:import']"
          icon="el-icon-upload2"
          @click="handleImportProject"
          >导入</el-button
        >
      </div>

      <el-table v-loading="tableLoading" height="300px" :data="tableList">
        <el-table-column
          label="创建日期/编号"
          align="center"
          prop=""
          min-width="120"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
            <br />
            <span>{{ scope.row.itemNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="项目名称"
          align="center"
          prop="itemName"
          show-overflow-tooltip
          min-width="200"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.itemName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="客户名称"
          align="center"
          prop="entrustOrganizationName"
          show-overflow-tooltip
          min-width="200"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.entrustOrganizationName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="负责人/参与人"
          align="center"
          prop=""
          min-width="180"
        >
          <template slot-scope="scope">
            <span
              >{{ scope.row.chargeUserName }}/{{
                scope.row.participantName
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="项目期限"
          align="center"
          prop=""
          min-width="200"
        >
          <template slot-scope="scope">
            <span
              >{{ parseTime(scope.row.beginTime, "{y}-{m}-{d}") }} 至
              {{ parseTime(scope.row.endTime, "{y}-{m}-{d}") }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          align="center"
          prop="remark"
          min-width="85"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" prop="" width="100">
          <template slot-scope="scope">
            <el-link
              type="primary"
              v-if="
                checkPermi(['basic:agreementItem:edit']) && scope.row.beOperate
              "
              @click="handleEditProject(scope.row)"
              >修改</el-link
            >
            <el-link
              style="margin-left: 10px"
              type="danger"
              v-if="
                checkPermi(['basic:agreementItem:delete']) &&
                scope.row.beOperate
              "
              @click="handleDeleteProject(scope.row)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        :total="tableTotal"
        @pagination="getTableListData"
      ></pagination>
    </div>

    <!-- 导入合同项目弹框 -->
    <ImportProjectDialog
      :show.sync="showImportProjectDialog"
      @refresh="getTableListData"
    ></ImportProjectDialog>

    <!-- 新增/修改/详情 委托协议单弹框 -->
    <AddEditProjectDialog
      :show.sync="showAddEditProjectDialog"
      :operType="operType"
      :row="currRow"
      @refresh="getTableListData"
    ></AddEditProjectDialog>
  </div>
</template>

<script>
import ImportProjectDialog from "./components/ImportProjectDialog.vue";
import AddEditProjectDialog from "./components/AddEditProjectDialog.vue";
import { projectList, projectDelete } from "@/api/person/project";

export default {
  name: "project",
  components: {
    ImportProjectDialog,
    AddEditProjectDialog,
  },
  data() {
    return {
      queryParams: {},
      tableLoading: false,
      tableList: [],
      tableTotal: 0,

      showImportProjectDialog: false,
      showAddEditProjectDialog: false,
      currRow: {},
      operType: "add",
    };
  },
  created() {
    this.initQueryParams();
    this.getTableListData();
  },
  methods: {
    // 初始化查询参数
    initQueryParams() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        itemName: "",
        itemNumber: "",
        entrustOrganizationId: "",
      };
    },
    // 获取查询参数
    getQueryParams() {
      const params = JSON.parse(JSON.stringify(this.queryParams));
      return params;
    },
    // 获取表格数据
    getTableListData() {
      this.tableLoading = true;
      const params = this.getQueryParams();
      projectList(params)
        .then((res) => {
          this.tableLoading = false;
          this.tableList = res.rows || [];
          this.tableTotal = res.total || 0;
        })
        .catch((err) => {
          this.tableLoading = false;
        });
    },
    // 点击搜索
    handleSearch() {
      this.queryParams.pageNum = 1;
      this.getTableListData();
    },
    // 点击重置
    handleReset() {
      this.initQueryParams();
      this.getTableListData();
    },
    // 点击导入合同项目
    handleImportProject() {
      this.showImportProjectDialog = true;
    },
    // 点击新增合同项目
    handleAddProject() {
      this.operType = "add";
      this.showAddEditProjectDialog = true;
    },
    // 点击修改合同项目
    handleEditProject(row) {
      this.operType = "edit";
      this.currRow = row;
      this.showAddEditProjectDialog = true;
    },
    // 点击删除合同项目
    handleDeleteProject(row) {
      this.$modal
        .confirm("是否确认删除该合同项目?")
        .then(() => {
          return projectDelete(row.agreementItemId);
        })
        .then(() => {
          this.getTableListData();
          this.$modal.msgSuccess("删除成功");
        })
        .catch((err) => {});
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
}
</style>
